<template>
  <section class="pop-happen-battle"
    v-show="isShow">
    <div class="box-message">
      <div class="text-center box-zombies">
        <img class="zombie-image"
          v-for="(z) in count" :key="z"
          src="@/assets/zombie.jpg" alt="">
      </div>
      <div class="text-center"
        style="margin-top: 12px;">
        {{ count }}个丧尸围了过来！选择行动
      </div>
      <div class="box-tabs">
        <div class="tab"
          :class="[tabIndex === 0 && 'active']"
          @click="tabIndex = 0">战斗</div>
        <div class="tab"
          :class="[tabIndex === 1 && 'active']"
          @click="tabIndex = 1">使用物品</div>
        <div class="tab"
          :class="[tabIndex === 2 && 'active']"
          v-show="!disableRunAway"
          @click="tabIndex = 2">逃跑</div>
      </div>
      <div class="box-action">
        <!-- 选择武器 -->
        <div v-show="tabIndex === 0">
          <div v-show="weapons.length">
            选择要使用的武器：
            <div class="text-center"
              style="margin-top: 6px;">
              <div class="item-icon"
                :class="[selectIndex === index && 'active', 'item-' + w.image]"
                v-for="(w, index) in weapons" :key="index"
                @click="handleSelect(index)"></div>
            </div>
            <div class="text-center">
              攻击{{ player.atk }}+{{ activeWeapon.addAtk }} 剩余次数{{ activeWeapon.useTime === 99 ? '无限' : activeWeapon.useTime }}
            </div>
          </div>
          <div class="text-center"
            v-show="!weapons.length">
            攻击{{ player.atk }}
          </div>
        </div>
        <!-- 使用物品 -->
        <div v-show="tabIndex === 1">
          <div>
            选择要使用的物品：
            <div class="text-center box-item-choice"
              v-show="player.items.map(i=> i.key).includes('grenade')"
              @click="selectItem = 'grenade'"
              style="margin-top: 6px;">
              <img class="item-radio"
                v-show="selectItem !== 'grenade'"
                src="@/assets/icon_checkbox_blank_circle.svg" alt="">
              <img class="item-radio"
                v-show="selectItem === 'grenade'"
                src="@/assets/icon_checkbox_circle_fill.svg" alt="">
              <div class="item-icon item-grenade"></div>
            </div>
            <div class="text-center box-item-choice"
              v-show="player.items.map(i=> i.key).includes('candle') && player.items.map(i=> i.key).includes('oil')"
              @click="selectItem = 'candle+oil'"
              style="margin-top: 6px;">
              <img class="item-radio"
                v-show="selectItem !== 'candle+oil'"
                src="@/assets/icon_checkbox_blank_circle.svg" alt="">
              <img class="item-radio"
                v-show="selectItem === 'candle+oil'"
                src="@/assets/icon_checkbox_circle_fill.svg" alt="">
              <div class="item-icon item-candle"></div>
              +
              <div class="item-icon item-oil"></div>
            </div>
            <div class="text-center box-item-choice"
              v-show="player.items.map(i=> i.key).includes('candle') && player.items.map(i=> i.key).includes('gasoline')"
              @click="selectItem = 'candle+gasoline'"
              style="margin-top: 6px;">
              <img class="item-radio"
                v-show="selectItem !== 'candle+gasoline'"
                src="@/assets/icon_checkbox_blank_circle.svg" alt="">
              <img class="item-radio"
                v-show="selectItem === 'candle+gasoline'"
                src="@/assets/icon_checkbox_circle_fill.svg" alt="">
              <div class="item-icon item-candle"></div>
              +
              <div class="item-icon item-gasoline"></div>
            </div>
            <div class="text-center box-item-choice"
              v-show="player.items.map(i=> i.key).includes('gasoline') && player.items.map(i=> i.key).includes('chainsaw')"
              @click="selectItem = 'gasoline+chainsaw'"
              style="margin-top: 6px;">
              <img class="item-radio"
                v-show="selectItem !== 'gasoline+chainsaw'"
                src="@/assets/icon_checkbox_blank_circle.svg" alt="">
              <img class="item-radio"
                v-show="selectItem === 'gasoline+chainsaw'"
                src="@/assets/icon_checkbox_circle_fill.svg" alt="">
              <div class="item-icon item-gasoline"></div>
              +
              <div class="item-icon item-chainsaw"></div>
            </div>
            <div class="text-center box-item-choice"
              v-show="player.items.map(i=> i.key).includes('soda')"
              @click="selectItem = 'soda'"
              style="margin-top: 6px;">
              <img class="item-radio"
                v-show="selectItem !== 'soda'"
                src="@/assets/icon_checkbox_blank_circle.svg" alt="">
              <img class="item-radio"
                v-show="selectItem === 'soda'"
                src="@/assets/icon_checkbox_circle_fill.svg" alt="">
              <div class="item-icon item-soda"></div>
            </div>
            <div class="text-center">
              {{ useItemDesc }}
            </div>
          </div>
        </div>
        <!-- 逃跑 -->
        <div v-show="tabIndex === 2">
          <div v-show="player.items.map(i=> i.key).includes('oil')">
            选择使用的物品：
            <div class="text-center box-item-choice"
              @click="selectItem === 'oil' ? selectItem = '' : selectItem = 'oil'"
              style="margin-top: 6px;">
              <img class="item-radio"
                v-show="selectItem !== 'oil'"
                src="@/assets/icon_checkbox_blank_circle.svg" alt="">
              <img class="item-radio"
                v-show="selectItem === 'oil'"
                src="@/assets/icon_checkbox_circle_fill.svg" alt="">
              <div class="item-icon item-oil"></div>
            </div>
            <div class="text-center">
              {{ ItemConfig.items.find(i => i.key === 'oil').desc }}
            </div>
          </div>
          <div class="text-center"
            v-show="!player.items.map(i=> i.key).includes('oil')">
            逃跑时受到{{ PlayerConfig.runAwayDamage }}伤害
          </div>
        </div>
      </div>
      <div class="text-center" style="margin-top: 12px;">
        <button class="primary-button"
          @click="handleConfirm()">确定</button>
        <!-- <button class="default-button"
          style="margin-left: 12px;"
          v-show="cancelBtnText"
          @click="handleCancel()">{{ cancelBtnText || '取消' }}</button> -->
      </div>
    </div>
  </section>
</template>

<script>
import { numberUtil } from '@youngbeen/angle-util'
import eventBus from '@/EventBus'
import player from '@/models/Player'
import ItemConfig from '@/models/config/Item'
import PlayerConfig from '@/models/config/Player'
import { checkAlive, checkItems } from '@/ctrls/CommonCtrl'

export default {
  data () {
    return {
      isShow: false,
      count: 0,
      tabIndex: 0,
      selectIndex: 0,
      selectItem: '',
      disableRunAway: false,
      tag: '',
      player,
      PlayerConfig,
      ItemConfig
    }
  },
  computed: {
    weapons () {
      if (this.player.items.length) {
        return this.player.items.filter(i => i.type === 'weapon' && i.useTime > 0)
      } else {
        return []
      }
    },
    activeWeapon () {
      if (this.weapons.length && this.selectIndex >= 0) {
        return this.weapons[this.selectIndex]
      } else {
        return {}
      }
    },
    useItemDesc () {
      if (this.selectItem) {
        if (['candle+oil', 'candle+gasoline'].includes(this.selectItem)) {
          return '可以杀死所有房间的丧尸'
        } else if (this.selectItem === 'gasoline+chainsaw') {
          return '为链锯增加2次额外使用次数'
        } else {
          return ItemConfig.items.find(i => i.key === this.selectItem).desc
        }
      } else {
        return ''
      }
    }
  },

  mounted () {
    eventBus.$on('notifyHappenBattle', (params) => {
      // params = {
      //   count: 0,
      //   disableRunAway: false,
      //   tag: <any>,
      // }
      if (player.character === 'moviefan' && numberUtil.random() < 2) {
        // movie fan has 20% chance to avoid a battle
        eventBus.$emit('notifyMessage', {
          message: '你提前躲了起来，丧尸没有发现'
        })
        this.close()
      } else {
        this.happenBattle(params)
      }
    })
    eventBus.$on('notifyMessageAction', ({ action, tag }) => {
      if (action === 'confirm' && tag && tag.source === 'restart') {
        this.close('restart')
      }
    })
  },

  beforeDestroy () {
    eventBus.$off('notifyHappenBattle')
    eventBus.$off('notifyMessageAction')
  },

  methods: {
    happenBattle ({ count, disableRunAway, tag }) {
      this.count = count || 0
      this.disableRunAway = disableRunAway
      this.tag = tag
      if (this.count) {
        this.isShow = true
      }
    },
    handleSelect (index) {
      this.selectIndex = index
    },
    handleConfirm () {
      if (this.tabIndex === 0) {
        this.dealBattle()
      } else if (this.tabIndex === 1 && this.selectItem && this.selectItem !== 'oil') {
        this.dealUseItem()
      } else if (this.tabIndex === 2) {
        this.dealRunAway()
      }
    },
    dealBattle () {
      let weaponAtk = 0
      if (this.activeWeapon.key && this.activeWeapon.useTime > 0) {
        weaponAtk = this.activeWeapon.addAtk
      }
      const finalAtk = player.atk + weaponAtk
      const damage = this.count - finalAtk
      if (damage >= 0) {
        player.hp -= damage
        eventBus.$emit('notifyMessage', {
          message: `战斗结束，生命值-${damage}`
        })
        if (!checkAlive()) {
          eventBus.$emit('notifyMessage', {
            message: '你没能幸免，游戏结束',
            confirmBtnText: '重新开始',
            tag: {
              source: 'restart'
            }
          })
          return
        }
      }
      this.activeWeapon.useTime !== 99 && this.activeWeapon.useTime > 0 && this.activeWeapon.useTime--
      if (this.activeWeapon.useTime <= 0) {
        checkItems()
      }
      this.close()
    },
    dealUseItem () {
      switch (this.selectItem) {
        case 'grenade': {
          const targetIndex = player.items.findIndex(i => i.key === this.selectItem)
          if (targetIndex >= 0) {
            const item = player.items[targetIndex]
            if (item.useTime > 0) {
              if (item.useTime !== 99) {
                item.useTime--
              }
              eventBus.$emit('notifyMessage', {
                message: '使用手雷炸死所有丧尸，战斗结束'
              })
              checkItems()
              this.close()
            }
          }
          break
        }
        case 'candle+oil': {
          const candleIndex = player.items.findIndex(i => i.key === 'candle')
          const oilIndex = player.items.findIndex(i => i.key === 'oil')
          if (candleIndex >= 0 && oilIndex >= 0) {
            const candleItem = player.items[candleIndex]
            const oilItem = player.items[oilIndex]
            if (candleItem.useTime > 0 && oilItem.useTime > 0) {
              if (candleItem.useTime !== 99) {
                candleItem.useTime--
              }
              if (oilItem.useTime !== 99) {
                oilItem.useTime--
              }
              eventBus.$emit('notifyMessage', {
                message: '使用煤油和蜡烛点燃所有丧尸，战斗结束'
              })
              checkItems()
              this.close()
            }
          }
          break
        }
        case 'candle+gasoline': {
          const candleIndex = player.items.findIndex(i => i.key === 'candle')
          const gasolineIndex = player.items.findIndex(i => i.key === 'gasoline')
          if (candleIndex >= 0 && gasolineIndex >= 0) {
            const candleItem = player.items[candleIndex]
            const gasolineItem = player.items[gasolineIndex]
            if (candleItem.useTime > 0 && gasolineItem.useTime > 0) {
              if (candleItem.useTime !== 99) {
                candleItem.useTime--
              }
              if (gasolineItem.useTime !== 99) {
                gasolineItem.useTime--
              }
              eventBus.$emit('notifyMessage', {
                message: '使用汽油和蜡烛点燃所有丧尸，战斗结束'
              })
              checkItems()
              this.close()
            }
          }
          break
        }
        case 'gasoline+chainsaw': {
          const gasolineIndex = player.items.findIndex(i => i.key === 'gasoline')
          const chainsawIndex = player.items.findIndex(i => i.key === 'chainsaw')
          if (gasolineIndex >= 0 && chainsawIndex >= 0) {
            const gasolineItem = player.items[gasolineIndex]
            const chainsawItem = player.items[chainsawIndex]
            if (gasolineItem.useTime > 0) {
              if (gasolineItem.useTime !== 99) {
                gasolineItem.useTime--
              }
              chainsawItem.useTime !== 99 && (chainsawItem.useTime += 2)
              eventBus.$emit('notifyMessage', {
                message: '将汽油灌入链锯，链锯的使用次数增加了'
              })
              checkItems()
            }
          }
          break
        }
        case 'soda': {
          const sodaIndex = player.items.findIndex(i => i.key === this.selectItem)
          if (sodaIndex >= 0) {
            const sodaItem = player.items[sodaIndex]
            if (sodaItem.useTime > 0) {
              if (sodaItem.useTime !== 99) {
                sodaItem.useTime--
              }
              player.hp += sodaItem.addHp
              eventBus.$emit('notifyMessage', {
                message: `使用${sodaItem.name}，生命值+${sodaItem.addHp}`
              })
              checkItems()
            }
          }
          break
        }
      }
    },
    dealRunAway () {
      const oilIndex = player.items.findIndex(i => i.key === 'oil')
      if (this.selectItem === 'oil' && oilIndex >= 0) {
        const oilItem = player.items[oilIndex]
        if (oilItem.useTime > 0) {
          if (oilItem.useTime !== 99) {
            oilItem.useTime--
          }
          eventBus.$emit('notifyMessage', {
            message: '你将煤油撒到地上，拖延了丧尸'
          })
          checkItems()
        }
      } else {
        player.hp -= PlayerConfig.runAwayDamage
        if (!checkAlive()) {
          eventBus.$emit('notifyMessage', {
            message: '你没能幸免，游戏结束',
            confirmBtnText: '重新开始',
            tag: {
              source: 'restart'
            }
          })
          return
        }
      }
      this.close('runAway')
    },
    close (result = 'win') {
      if (result !== 'restart') {
        eventBus.$emit('notifyBattleResult', {
          result,
          tag: this.tag
        })
      }
      this.isShow = false
      this.count = 0
      this.tabIndex = 0
      this.selectIndex = 0
      this.selectItem = ''
      this.disableRunAway = false
      this.tag = ''
    }
  }
}
</script>

<style scoped lang="less">
.pop-happen-battle {
  position: absolute;
  z-index: 43;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  .box-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    padding: 18px;
    border: 6px solid red;
    border-radius: 12px;
    background: #343434;
    color: #fff;
    font-size: 28px;
    .box-zombies {
      background: rgb(191, 191, 189);
      .zombie-image {
        max-height: 200px;
      }
    }
    .box-tabs {
      display: flex;
      justify-content: space-between;
      margin-top: 24px;
      .tab {
        width: 30%;
        height: 60px;
        line-height: 60px;
        background: rgba(205, 175, 0, 0.4);
        color: #000;
        border-radius: 6px;
        text-align: center;
        transition: all 0.3s;
        &.active {
          background: rgba(205, 175, 0, 1);
          color: #fff;
        }
      }
    }
    .box-action {
      margin-top: 12px;
      padding: 12px;
      border: 4px solid rgba(205, 175, 0, 1);
      border-radius: 6px;
    }
    .box-item-choice {
      display: flex;
      // justify-content: center;
      align-items: center;
      margin-left: 30px;
    }
    .item-radio {
      width: 60px;
      height: 60px;
    }
    .item-icon {
      width: 100px;
      height: 100px;
      border: 6px solid #eee;
      border-radius: 8px;
      &:not(:last-of-type) {
        margin-right: 12px;
      }
      &.active {
        border: 6px solid red;
      }
    }
  }
}
</style>
